<template>
  <div class="data-entry-container">
    <!-- 添加加载指示器 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <div class="loading-text">正在加载数据录入模块...</div>
    </div>

    <div class="data-entry page-container">
      <div class="bg">
        <div class="module-container">
          <div class="module-header">
            <icon name="edit" class="header-icon"></icon>
            <span class="header-title">数据录入</span>
          </div>
          <div class="module-content">
            <dv-border-box-12 class="content-box" :color="['rgba(104, 216, 254, 0.3)', 'rgba(104, 216, 254, 0.5)']">
              <!-- 模块选择 -->
              <div class="module-section">
                <div class="section-header">
                  <h2 class="section-title">选择数据录入模块</h2>
                </div>
                <div class="module-selector">
                  <el-select
                    v-model="selectedModule"
                    placeholder="请选择模块"
                    size="medium"
                    class="module-select"
                    popper-class="data-entry-select-dropdown">
                    <el-option label="自主学术讲座" value="zzxsjz"></el-option>
                    <el-option label="回答问题" value="hdwt"></el-option>
                    <el-option label="晚加班" value="wjb"></el-option>
                    <el-option label="公差勤务" value="gcqw"></el-option>
                    <el-option label="军容风纪" value="jrfj"></el-option>
                    <el-option label="请假缺勤" value="qjqq"></el-option>
                    <el-option label="外出" value="wc"></el-option>
                    <el-option label="988就诊" value="988"></el-option>
                    <el-option label="纠察记录" value="jcjl"></el-option>
                  </el-select>
                </div>
              </div>

              <!-- 动态显示选中的模块 -->
              <div v-if="selectedModule === 'zzxsjz'" class="scrollable-module">
                <div class="module-content-header">
                  <h2 class="section-title">自主学术讲座</h2>
                </div>
                <div class="table-container">
                  <el-table
                    :data="zzxsjz"
                    style="width: 100%"
                    :header-cell-style="{
                      backgroundColor: 'rgba(19, 25, 47, 0.8)',
                      color: '#68d8fe',
                      fontWeight: 'bold'
                    }"
                    :cell-style="{
                      backgroundColor: 'rgba(19, 25, 47, 0.4)'
                    }"
                  >
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="lecture" label="讲座名称">
                      <template #default="scope">
                        <el-input v-model="scope.row.lecture"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" size="medium" icon="el-icon-plus" @click="addRow('zzxsjz')">添加行</el-button>
                  <el-button type="danger" size="medium" icon="el-icon-delete" @click="deleteRow('zzxsjz', zzxsjz.length - 1)">删除行</el-button>
                  <el-button type="success" size="medium" icon="el-icon-check" @click="saveData('zzxsjz')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'gcqw'" class="scrollable-module">
                <div class="module-content-header">
                  <h2 class="section-title">公差勤务</h2>
                </div>
                <div class="table-container">
                  <el-table
                    :data="gcqw"
                    style="width: 100%"
                    :header-cell-style="{
                      backgroundColor: 'rgba(19, 25, 47, 0.8)',
                      color: '#68d8fe',
                      fontWeight: 'bold'
                    }"
                    :cell-style="{
                      backgroundColor: 'rgba(19, 25, 47, 0.4)'
                    }"
                  >
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="count" label="次数">
                      <template #default="scope">
                        <el-input v-model="scope.row.count" type="number"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" size="medium" icon="el-icon-plus" @click="addRow('gcqw')">添加行</el-button>
                  <el-button type="danger" size="medium" icon="el-icon-delete" @click="deleteRow('gcqw', gcqw.length - 1)">删除行</el-button>
                  <el-button type="success" size="medium" icon="el-icon-check" @click="saveData('gcqw')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'formData1'" class="scrollable-module">
                <h2 class="section-title">公差记录</h2>
                <div class="table-container">
                  <el-table :data="formData1" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="record" label="公差记录">
                      <template #default="scope">
                        <el-input v-model="scope.row.record"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData1')">保存数据</el-button>
              </div>

              <div v-if="selectedModule === 'hdwt'" class="scrollable-module">
                <h2 class="section-title">回答问题</h2>
                <div class="table-container">
                  <el-table :data="hdwt" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="course" label="课程" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.course"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="count" label="次数">
                      <template #default="scope">
                        <el-input v-model="scope.row.count" type="number"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" @click="addRow('hdwt')">添加行</el-button>
                  <el-button type="danger" @click="deleteRow('hdwt', hdwt.length - 1)">删除行</el-button>
                  <el-button type="success" @click="saveData('hdwt')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'formData2'" class="scrollable-module">
                <h2 class="section-title">保密检查</h2>
                <div class="table-container">
                  <el-table :data="formData2" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="chatRecord" label="聊天记录" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.chatRecord"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="albumIssue" label="相册问题">
                      <template #default="scope">
                        <el-input v-model="scope.row.albumIssue"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="hotspotLocation" label="热点位置">
                      <template #default="scope">
                        <el-input v-model="scope.row.hotspotLocation"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="badRecord" label="不良记录">
                      <template #default="scope">
                        <el-input v-model="scope.row.badRecord"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="wallRecord" label="翻墙记录">
                      <template #default="scope">
                        <el-input v-model="scope.row.wallRecord"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="other" label="其他">
                      <template #default="scope">
                        <el-input v-model="scope.row.other"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData2')">保存数据</el-button>
              </div>
              <div v-if="selectedModule === 'wjb'" class="scrollable-module">
                <h2 class="section-title">晚加班</h2>
                <div class="table-container">
                  <el-table :data="wjb" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="location" label="地点">
                      <template #default="scope">
                        <el-input v-model="scope.row.location"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" @click="addRow('wjb')">添加行</el-button>
                  <el-button type="danger" @click="deleteRow('wjb', wjb.length - 1)">删除行</el-button>
                  <el-button type="success" @click="saveData('wjb')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'wc'" class="scrollable-module">
                <h2 class="section-title">外出</h2>
                <div class="table-container">
                  <el-table :data="wc" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="location" label="地点">
                      <template #default="scope">
                        <el-input v-model="scope.row.location"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" @click="addRow('wc')">添加行</el-button>
                  <el-button type="danger" @click="deleteRow('wc', wc.length - 1)">删除行</el-button>
                  <el-button type="success" @click="saveData('wc')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'formData7'" class="scrollable-module">
                <h2 class="section-title">外出</h2>
                <div class="table-container">
                  <el-table :data="formData2" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="albumIssue" label="外出时长">
                      <template #default="scope">
                        <el-input v-model="scope.row.albumIssue"></el-input>
                      </template>
                    </el-table-column>

                    <el-table-column prop="other" label="外出地点">
                      <template #default="scope">
                        <el-input v-model="scope.row.other"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData7')">保存数据</el-button>
              </div>
              <div v-if="selectedModule === '988'" class="scrollable-module">
                <h2 class="section-title">988就诊</h2>
                <div class="table-container">
                  <el-table :data="988" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="reason" label="原因">
                      <template #default="scope">
                        <el-input v-model="scope.row.reason"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" @click="addRow('988')">添加行</el-button>
                  <el-button type="danger" @click="deleteRow('988', this['988'].length - 1)">删除行</el-button>
                  <el-button type="success" @click="saveData('988')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'formData5'" class="scrollable-module">
                <h2 class="section-title">988就诊</h2>
                <div class="table-container">
                  <el-table :data="formData1" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="record" label="缘由">
                      <template #default="scope">
                        <el-input v-model="scope.row.record"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData5')">保存数据</el-button>
              </div>

              <div v-if="selectedModule === 'jcjl'" class="scrollable-module">
                <h2 class="section-title">纠察记录</h2>
                <div class="table-container">
                  <el-table :data="jcjl" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="item" label="事项">
                      <template #default="scope">
                        <el-input v-model="scope.row.item"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" @click="addRow('jcjl')">添加行</el-button>
                  <el-button type="danger" @click="deleteRow('jcjl', jcjl.length - 1)">删除行</el-button>
                  <el-button type="success" @click="saveData('jcjl')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'formData3'" class="scrollable-module">
                <h2 class="section-title">纠察记录</h2>
                <div class="table-container">
                  <el-table :data="formData3" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="studentId" label="学号" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.studentId"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="time" label="时间" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.time"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="item" label="事项">
                      <template #default="scope">
                        <el-input v-model="scope.row.item"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData3')">保存数据</el-button>
              </div>

              <div v-if="selectedModule === 'jrfj'" class="scrollable-module">
                <h2 class="section-title">军容风纪</h2>
                <div class="table-container">
                  <el-table :data="jrfj" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="reason" label="原因">
                      <template #default="scope">
                        <el-input v-model="scope.row.reason"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" @click="addRow('jrfj')">添加行</el-button>
                  <el-button type="danger" @click="deleteRow('jrfj', jrfj.length - 1)">删除行</el-button>
                  <el-button type="success" @click="saveData('jrfj')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'formData4'" class="scrollable-module">
                <h2 class="section-title">军容风纪</h2>
                <div class="table-container">
                  <el-table :data="formData4" style="width: 100%">
                    <el-table-column prop="time" label="时间" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.time"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="reason" label="原因">
                      <template #default="scope">
                        <el-input v-model="scope.row.reason"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData4')">保存数据</el-button>
              </div>
              <div v-if="selectedModule === 'qjqq'" class="scrollable-module">
                <h2 class="section-title">请假缺勤</h2>
                <div class="table-container">
                  <el-table :data="qjqq" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="group" label="组别" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.group"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="120">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>
                    <el-table-column prop="period" label="时段">
                      <template #default="scope">
                        <el-input v-model="scope.row.period"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="reason" label="原因">
                      <template #default="scope">
                        <el-input v-model="scope.row.reason"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="button-group">
                  <el-button type="primary" @click="addRow('qjqq')">添加行</el-button>
                  <el-button type="danger" @click="deleteRow('qjqq', qjqq.length - 1)">删除行</el-button>
                  <el-button type="success" @click="saveData('qjqq')">保存数据</el-button>
                </div>
              </div>

              <div v-if="selectedModule === 'formData8'" class="scrollable-module">
                <h2 class="section-title">请假</h2>
                <div class="table-container">
                  <el-table :data="formData2" style="width: 100%">
                    <el-table-column prop="name" label="姓名" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="class" label="班级" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.class"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="date" label="日期" width="180">
                      <template #default="scope">
                        <el-date-picker
                          v-model="scope.row.date"
                          type="date"
                          placeholder="选择日期"
                          value-format="yyyy-MM-dd">
                        </el-date-picker>
                      </template>
                    </el-table-column>>
                    <el-table-column prop="albumIssue" label="原因">
                      <template #default="scope">
                        <el-input v-model="scope.row.albumIssue"></el-input>
                      </template>
                    </el-table-column>

                    <el-table-column prop="other" label="请假时间">
                      <template #default="scope">
                        <el-input v-model="scope.row.other"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData8')">保存数据</el-button>
              </div>


              <div v-if="selectedModule === 'formData6'" class="scrollable-module">
                <h2 class="section-title">成绩记录</h2>
                <div class="table-container">
                  <el-table :data="formData6" style="width: 100%">
                    <el-table-column prop="studentId" label="学号" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.studentId"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="subject" label="科目" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.subject"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="score" label="成绩" width="180">
                      <template #default="scope">
                        <el-input v-model="scope.row.score"></el-input>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <el-button type="primary" @click="saveData('formData6')">保存数据</el-button>
              </div>
            </dv-border-box-12>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import datainputApi from '@/api/datainput';

export default {
  name: 'DataEntry',
  data() {
    return {
      isLoading: true, // 添加加载状态
      selectedModule: 'zzxsjz',
      zzxsjz: [
        { 
          name: '',
          group: '',
          class: '',
          date: '',
          lecture: ''
        }
      ],
      hdwt: [
        { name: '', group: '', class: '', date: '', count: '', course: '' } // 回答问题默认一条空记录
      ],
      wjb: [
        { name: '', group: '', class: '', date: '', location: '' } // 晚加班默认一条空记录
      ],
      gcqw: [
        { name: '', group: '', class: '', date: '', count: '' } // 公差勤务默认一条空记录
      ],
      jrfj: [
        { name: '', group: '', class: '', date: '', reason: '' } // 军容风纪默认一条空记录
      ],
      qjqq: [
        { name: '', group: '', class: '', date: '', period: '', reason: '' } // 请假缺勤默认一条空记录
      ],
      wc: [
        { name: '', group: '', class: '', date: '', location: '' } // 外出默认一条空记录
      ],
      988: [
        { name: '', group: '', class: '', date: '', reason: '' } // 988就诊默认一条空记录
      ],
      jcjl: [
        { name: '', group: '', class: '', date: '', item: '' } // 纠察记录默认一条空记录
      ],

      // 保留原有的表单数据结构，用于后端接口兼容
      formData1: [
        { name: '', class: '', date: '', record: '' }
      ],
      formData2: [
        { name: '', class: '', chatRecord: '', albumIssue: '', hotspotLocation: '', badRecord: '', wallRecord: '', other: '' }
      ],
      formData3: [
        { name: '', studentId: '', time: '', item: '' }
      ],
      formData4: [
        { time: '', name: '', class: '', reason: '' }
      ],
      formData5: [
        { name: '', class: '', data: '', record: '' }
      ],
      formData6: [
        { studentId: '', subject: '', score: '' }
      ],
      formData7: [
        { name: '', class: '', data: '', albumIssue: '', other: '' }
      ],
      formData8: [
        { name: '', class: '', data: '', albumIssue: '', other: '' }
      ]
    };
  },
  created() {
    // 预加载数据
    console.log('DataEntry 组件创建');
  },
  mounted() {
    // 组件挂载完成后，设置加载状态为 false
    console.log('DataEntry 组件挂载完成');
    setTimeout(() => {
      this.isLoading = false;
    }, 300);

    // 添加窗口大小变化监听，以便调整布局
    window.addEventListener('resize', this.handleResize);
    // 初始调用一次以设置正确的布局
    this.handleResize();
  },

  beforeDestroy() {
    // 组件销毁前移除事件监听
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // 添加一行
    addRow(moduleName) {
      switch(moduleName) {
        case 'zzxsjz':
          this.zzxsjz.push({
            name: '',
            group: '',
            class: '',
            date: '',
            lecture: ''
          });
          break;
        case 'hdwt':
          this.hdwt.push({ name: '', group: '', class: '', date: '', count: '', course: '' });
          break;
        case 'wjb':
          this.wjb.push({ name: '', group: '', class: '', date: '', location: '' });
          break;
        case 'gcqw':
          this.gcqw.push({ name: '', group: '', class: '', date: '', count: '' });
          break;
        case 'jrfj':
          this.jrfj.push({ name: '', group: '', class: '', date: '', reason: '' });
          break;
        case 'qjqq':
          this.qjqq.push({ name: '', group: '', class: '', date: '', period: '', reason: '' });
          break;
        case 'wc':
          this.wc.push({ name: '', group: '', class: '', date: '', location: '' });
          break;
        case '988':
          this['988'].push({ name: '', group: '', class: '', date: '', reason: '' });
          break;
        case 'jcjl':
          this.jcjl.push({ name: '', group: '', class: '', date: '', item: '' });
          break;
        case 'formData1':
          this.formData1.push({ name: '', class: '', date: '', record: '' });
          break;
        case 'formData2':
          this.formData2.push({ name: '', class: '', chatRecord: '', albumIssue: '', hotspotLocation: '', badRecord: '', wallRecord: '', other: '' });
          break;
        case 'formData3':
          this.formData3.push({ name: '', studentId: '', time: '', item: '' });
          break;
        case 'formData4':
          this.formData4.push({ time: '', name: '', class: '', reason: '' });
          break;
        case 'formData5':
          this.formData5.push({ name: '', class: '', data: '', record: '' });
          break;
        case 'formData6':
          this.formData6.push({ studentId: '', subject: '', score: '' });
          break;
        case 'formData7':
          this.formData7.push({ name: '', class: '', data: '', albumIssue: '', other: '' });
          break;
        case 'formData8':
          this.formData8.push({ name: '', class: '', data: '', albumIssue: '', other: '' });
          break;
      }
    },

    // 删除一行
    deleteRow(moduleName, index) {
      if (this[moduleName].length > 1) {
        this[moduleName].splice(index, 1);
      } else {
        this.$message({
          message: '至少保留一行数据',
          type: 'warning'
        });
      }
    },

    // 处理窗口大小变化
    handleResize() {
      // 这里可以根据窗口大小调整布局
      // 例如，可以根据窗口宽度调整表格列宽
      console.log('窗口大小变化，调整布局');

      // 获取当前窗口宽度
      const windowWidth = window.innerWidth;

      // 根据窗口宽度设置不同的样式或布局
      if (windowWidth < 1200) {
        // 小屏幕布局调整
        document.documentElement.style.setProperty('--data-entry-padding', '10px');
      } else {
        // 大屏幕布局调整
        document.documentElement.style.setProperty('--data-entry-padding', '20px');
      }
    },

    async saveData(moduleName) {
      console.log(`保存的数据 (${moduleName}):`, this[moduleName]);
      try {
        // 根据选择的模板发送 flag 对象
        const flagMap = {
          'zzxsjz': { type: 'zzxsjz', description: '自主学术讲座' },
          'hdwt': { type: 'hdwt', description: '回答问题' },
          'wjb': { type: 'wjb', description: '晚加班' },
          'gcqw': { type: 'gcqw', description: '公差勤务' },
          'jrfj': { type: 'jrfj', description: '军容风纪' },
          'qjqq': { type: 'qjqq', description: '请假缺勤' },
          'wc': { type: 'wc', description: '外出' },
          '988': { type: '988', description: '988就诊' },
          'jcjl': { type: 'jcjl', description: '纠察记录' }
        };

        // 统一通过 datainputApi.saveDataInput 保存数据
        const flag = flagMap[moduleName].type;
        const data = this[moduleName];
        if (moduleName === 'zzxsjz') {
          const mappedData = this.zzxsjz.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              topic: raw.lecture
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.zzxsjz = [{ name: '', group: '', class: '', date: '', lecture: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === 'hdwt') {
          const mappedData = this.hdwt.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              answerCount: raw.count,
              course: raw.course
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.hdwt = [{ name: '', group: '', class: '', date: '', count: '', course: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === 'wjb') {
          const mappedData = this.wjb.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              overPlace: raw.location
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.wjb = [{ name: '', group: '', class: '', date: '', location: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === 'gcqw') {
          const mappedData = this.gcqw.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.gcqw = [{ name: '', group: '', class: '', date: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === 'jrfj') {
          const mappedData = this.jrfj.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              reason: raw.reason
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.jrfj = [{ name: '', group: '', class: '', date: '', reason: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === 'qjqq') {
          const mappedData = this.qjqq.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              leaveTime: raw.period,
              reason: raw.reason
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.qjqq = [{ name: '', group: '', class: '', date: '', period: '', reason: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === 'wc') {
          const mappedData = this.wc.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              outDestination: raw.location,
              outDuration: raw.duration
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.wc = [{ name: '', group: '', class: '', date: '', location: '', duration: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === '988') {
          const mappedData = this['988'].map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              reason: raw.reason,
              visitTime: raw.visitTime
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this['988'] = [{ name: '', group: '', class: '', date: '', reason: '', visitTime: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        if (moduleName === 'jcjl') {
          const mappedData = this.jcjl.map(item => {
            const raw = { ...item };
            return {
              name: raw.name,
              groupName: raw.group,
              classes: raw.class,
              date: raw.date,
              item: raw.item
            };
          });
          const response = await datainputApi.saveDataInput(mappedData, flagMap[moduleName].type);
          if (response.code === '200') {
            this.$message.success(response.msg || '保存成功');
            this.jcjl = [{ name: '', group: '', class: '', date: '', item: '' }];
          } else {
            this.$message.error(response.msg || '保存失败');
          }
          return;
        }
        // 其他模块直接await，不声明未使用变量
        await datainputApi.saveDataInput(data, flag);

        // 显示成功消息
        this.$message({
          message: '数据保存成功',
          type: 'success'
        });
      } catch (error) {
        console.error('保存数据失败:', error);
        // 显示错误消息
        this.$message({
          message: '保存数据失败: ' + error.message,
          type: 'error'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../assets/scss/common.scss';

/* 定义 CSS 变量，用于响应式设计 */
:root {
  --data-entry-padding: 20px;
  --data-entry-border-radius: 4px;
  --data-entry-primary-color: #68d8fe;
  --data-entry-bg-color: rgba(19, 25, 47, 0.8);
  --data-entry-text-color: #d3d6dd;
}

html, body {
  height: 100%;
  overflow: auto; /* 允许滚动 */
}

.data-entry-container {
  position: relative; /* 为加载指示器提供定位上下文 */
  width: 100%;
  height: 100%;

  /* 加载指示器样式 */
  .loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 3, 8, 0.8);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loading-spinner {
      width: 50px;
      height: 50px;
      border: 3px solid rgba(104, 216, 254, 0.3);
      border-radius: 50%;
      border-top-color: #68d8fe;
      animation: spin 1s ease-in-out infinite;
      margin-bottom: 20px;
    }

    .loading-text {
      color: #68d8fe;
      font-size: 16px;
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .data-entry {
    width: 100%;
    height: 100%;

    .module-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden; /* 防止整体出现滚动条 */

      .module-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 10px;

        .header-icon {
          font-size: 24px;
          color: #68d8fe;
          margin-right: 10px;
        }

        .header-title {
          font-size: 22px;
          font-weight: bold;
          color: #68d8fe;
        }
      }

      .module-content {
        flex: 1;
        overflow: hidden; /* 防止出现双重滚动条 */
        display: flex;
        flex-direction: column;

        .content-box {
          height: 100%;
          padding: var(--data-entry-padding);
          overflow: hidden; /* 防止出现双重滚动条 */
          display: flex;
          flex-direction: column;

          .module-section {
            margin-bottom: 20px;

            .section-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 15px;
            }

            .section-title {
              font-size: 18px;
              font-weight: bold;
              color: var(--data-entry-primary-color);
              margin: 0;
            }

            .module-selector {
              margin-top: 10px;

              .module-select {
                width: 240px;
              }
            }
          }

          .module-content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 0 5px;

            .section-title {
              font-size: 18px;
              font-weight: bold;
              color: #68d8fe;
              margin: 0;
            }
          }

          .scrollable-module {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 防止出现双重滚动条 */
          }

          .table-container {
            flex: 1;
            overflow: auto; /* 允许表格内容滚动 */
            margin-bottom: 15px;
            border-radius: var(--data-entry-border-radius);
            border: 1px solid rgba(104, 216, 254, 0.2);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

            /* 自定义 Element UI 表格样式 */
            .el-table {
              background-color: transparent !important;
              color: #d3d6dd !important;

              &::before {
                display: none; /* 移除表格底部边框 */
              }

              .el-table__header-wrapper {
                th {
                  background-color: rgba(19, 25, 47, 0.8) !important;
                  color: #68d8fe !important;
                  font-weight: bold !important;
                  border-bottom: 1px solid rgba(104, 216, 254, 0.2) !important;
                }
              }

              .el-table__body-wrapper {
                td {
                  background-color: rgba(19, 25, 47, 0.4) !important;
                  border-bottom: 1px solid rgba(104, 216, 254, 0.1) !important;
                }
              }

              .el-input__inner {
                background-color: rgba(19, 25, 47, 0.6) !important;
                border: 1px solid rgba(104, 216, 254, 0.3) !important;
                color: #d3d6dd !important;

                &:focus {
                  border-color: #68d8fe !important;
                }
              }

              .el-input.is-disabled .el-input__inner {
                background-color: rgba(19, 25, 47, 0.3) !important;
                color: #8c8c8c !important;
              }
            }
          }

          .button-group {
            display: flex;
            justify-content: flex-end;
            padding: 10px 5px;
            gap: 15px;
            margin-top: auto; /* 确保按钮组始终在底部 */

            .el-button {
              padding: 10px 20px;
              border-radius: var(--data-entry-border-radius);
              font-weight: 500;
              transition: all 0.3s ease;

              &.el-button--primary {
                background-color: rgba(64, 158, 255, 0.8);
                border-color: rgba(64, 158, 255, 0.9);

                &:hover {
                  background-color: rgba(64, 158, 255, 1);
                }
              }

              &.el-button--danger {
                background-color: rgba(245, 108, 108, 0.8);
                border-color: rgba(245, 108, 108, 0.9);

                &:hover {
                  background-color: rgba(245, 108, 108, 1);
                }
              }

              &.el-button--success {
                background-color: rgba(103, 194, 58, 0.8);
                border-color: rgba(103, 194, 58, 0.9);

                &:hover {
                  background-color: rgba(103, 194, 58, 1);
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 自定义 Element UI 下拉菜单样式 */
>>> .data-entry-select-dropdown {
  background-color: rgba(19, 25, 47, 0.95) !important;
  border: 1px solid rgba(104, 216, 254, 0.3) !important;

  .el-select-dropdown__item {
    color: #d3d6dd !important;

    &.hover, &:hover {
      background-color: rgba(104, 216, 254, 0.2) !important;
    }

    &.selected {
      color: #68d8fe !important;
      font-weight: bold;
      background-color: rgba(104, 216, 254, 0.1) !important;
    }
  }
}
</style>
